<template>
    <div class="icon-wrapper">
        <div class="intro">点击图标复制图标代码</div>
        <div class="search-wrapper">
            <p>当前图标总数：<span>{{iconNum}}</span></p>
        </div>
        <div style="width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div class="icon-item-box" v-for="(item,index) in classList" :key="index">
                <div class="icon-item" :title="item.className"
                     v-clipboard:copy="item.className"
                     v-clipboard:success="onCopy"
                     v-clipboard:error="onError">
                    <i :class="item.className"></i>
                    <span>{{item.className.substring(6)}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import iconClass from '../../utils/icon-font-awesome.json'

    export default {
        name: 'iconWrapper',
        data() {
            return {
                classList: null,
                iconNum: 0,
            }
        },
        mounted() {
            this.classList = iconClass.iconClass;
            this.iconNum = iconClass.iconClass.length
        },
        methods: {
            onCopy: function (e) {
                this.$message({
                    message: '成功复制到粘贴板！',
                    type: 'success'
                });
            },
            onError: function (e) {
                this.$message.error('复制失败，您的浏览器可能不支持此操作');
            }
        }
    }
</script>
<style scoped lang="scss">
    .icon-wrapper {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;

        .intro {
            width: 100%;
            height: 40px;
            background-color: #42b983;
            border-radius: 5px;
            line-height: 40px;
            font-size: 15px;
            color: #fff;
            padding: 0 15px;
            box-sizing: border-box;
            opacity: 0.8;
        }

        .search-wrapper {
            width: 100%;
            margin-bottom: 15px;

            .el-input {
                width: 300px;
            }

            p {
                width: 100%;
                color: #333;
                font-family: '微软雅黑';

                span {
                    font-weight: bold;
                    font-size: 20px;
                    color: #42b983;
                }
            }
        }
    }

    .icon-item-box {
        width: 19%;
    }

    .icon-item {
        display: flex;
        align-items: center;
        padding: 0 10px;
        height: 40px;
        border-radius: 5px;
        margin-bottom: 30px;
        cursor: pointer;
        border: 1px solid #eee;

        i {
            font-size: 20px;
            color: #333;
        }

        &:hover {
            background-color: #42b983;

            i {
                font-size: 24px;
                color: #fff;
            }

            span {
                color: #fff;
            }
        }

        span {
            font-size: 14px;
            margin-left: 10px;
            color: #333;
        }
    }

    @media screen and (max-width: 1380px) {
        .icon-item-box {
            width: 23%;
        }
    }

    @media screen and (max-width: 1200px) {
        .icon-item-box {
            width: 32%;
        }
    }
</style>
